<template>
  <!-- 机构管理 -->
  <div class="container">
    <el-row>
      <!-- 左侧树形结构 -->
      <el-col :span="4" class="TreeList">
        <div class="grid-content bg-purple">
          <el-tree
            :data="institutionList"
            :props="defaultProps"
            :highlight-current="true"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!-- 右侧信息区域 -->
      <el-col :span="20" class="right_info">
        <el-row>
          <!-- 机构信息 -->
          <el-col :span="24" class="mech_info">
            <!-- 机构信息头部 -->
            <el-row>
              <el-col :span="24" class="mech_info_title">
                <div class="grid-content bg-purple-dark">机构信息</div>
              </el-col>
            </el-row>
            <!-- 机构信息内容 -->
            <el-row>
              <el-col :span="24" class="mech_info_contenter">
                <el-form ref="form" :model="from" label-width="80px">
                  <el-row class="row1">
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="机构编号" label-width="100px">
                            <el-input v-model="from.id" disabled></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="机构名称" label-width="100px">
                            <el-input v-model="from.name" disabled></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="机构类型" label-width="100px">
                            <el-input
                              disabled
                              v-model="from.type == 1 ? '一级转运' : '二级转运'"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row class="row">
                    <el-col :span="8">
                      <el-form-item label="机构地址" label-width="100px">
                        <el-select
                          v-model="value"
                          placeholder="请选择"
                          style="width: 100%"
                          :disabled="flag"
                        >
                          <el-option
                            v-for="(item, index) in province"
                            :key="index"
                            :label="item.name"
                            :value="index"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" class="col-select">
                      <el-select
                        v-model="value2"
                        placeholder="请选择"
                        style="width: 100%"
                        :disabled="flag"
                      >
                        <el-option
                          v-for="(item, index) in city"
                          :key="index"
                          :label="item.name"
                          :value="index"
                        />
                      </el-select>
                    </el-col>
                    <el-col :span="8" class="col-select">
                      <el-select
                        v-model="value3"
                        placeholder="请选择"
                        style="width: 100%"
                        :disabled="flag"
                      >
                        <el-option
                          v-for="(item, index) in county"
                          :key="index"
                          :label="item.name"
                          :value="index"
                        />
                      </el-select>
                    </el-col>
                  </el-row>
                  <el-row class="row">
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="详细地址" label-width="100px">
                            <el-input
                              v-model="from.name"
                              :disabled="flag"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="经度" label-width="100px">
                            <el-input
                              v-model="from.longitude"
                              disabled
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="纬度" label-width="100px">
                            <el-input
                              v-model="from.latitude"
                              disabled
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row class="row">
                    <el-col :span="24">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="机构负责人" label-width="100px">
                            <el-input
                              v-model="from.managerName"
                              :disabled="flag"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="机构电话" label-width="100px">
                            <el-input
                              v-model="from.phone"
                              :disabled="flag"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-form>
                <el-row class="row_last">
                  <el-col :span="24">
                    <el-button type="danger" @click="editor">{{
                      flag == true ? '编辑' : '保存'
                    }}</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 员工信息 -->
        <el-row>
          <el-col :span="24" class="peo_info">
            <el-row>
              <el-col :span="24" class="peo_info_title">
                <div class="grid-content bg-purple-dark">员工信息</div>
              </el-col>
            </el-row>
            <el-table :data="EmployeeDetails" style="width: 100%">
              <el-table-column prop="name" label="序号">
                <template v-slot="{ $index }">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="userId" width="250" label="编号">
              </el-table-column>
              <el-table-column prop="name" label="员工姓名"> </el-table-column>
              <el-table-column prop="mobile" label="手机号"> </el-table-column>
              <el-table-column prop="agency.name" label="所属机构">
              </el-table-column>
              <el-table-column prop="account" label="系统账户">
              </el-table-column>
              <el-table-column prop="roleNames" label="系统角色">
              </el-table-column>
              <el-table-column prop="status" label="账号状态">
                <template v-slot="{ row }">
                  {{ row.state === 1 ? '已启用' : '未启用' }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 放置分页组件 -->
        <!-- layout：需要的功能 -->
        <!-- current-page：当前页数 -->
        <!-- page-sizes：每页显示的数据条数 -->
        <!-- page-size：每页显示条目个数 -->
        <!-- total：总条目数 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  treeInstitutionApi,
  getInstitutionDetailsApi,
  getEmployeeDetailsApi,
  getAddressApi,
  editorInstitutionApi
} from '@/api/basicdata'
// import countRight from './countRight.vue'
export default {
  // components: { countRight },
  data() {
    return {
      flag: true, // 禁用状态  true开启
      page: 1, // 当前页数
      pageSize: 5, // 每页显示条目个数
      agencyId: '1024982867475820033', // 机构id
      total: 0, // 数据总条数
      institutionList: [], // 转运中心列表
      EmployeeDetails: [], // 获取员工信息
      // institutionDetails: {}, // 机构详情
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      from: {}, // 机构详情
      province: [], // 省份
      city: [], // 城市
      county: [], // 区县
      value: 0, // 省份默认值
      value2: 0, // 城市默认值
      value3: 0, // 区县默认值
      // parentId: 0, // 父级ID
      provinceId: 0, // 省的ID
      cityId: 0 // 城市ID
    }
  },
  watch: {
    // 监听省份变化
    async value(newVal) {
      console.log(newVal)
      if (typeof newVal === 'number') {
        const id = this.province[newVal].id
        console.log(id)
        const provinceId = await getAddressApi(id)
        console.log(provinceId)
        this.city = provinceId.data.data
        // this.value2 = ''
        // this.value3 = ''
      }
    },
    // 监听城市变化
    async value2(newVal) {
      if (typeof newVal === 'number') {
        const id = this.city[newVal].id
        const cityId = await getAddressApi(id)
        console.log(cityId)
        this.county = cityId.data.data
      }
    }
  },
  created() {
    // 转运中心列表
    this.getDepartmentList()
    // 获取机构详情
    this.getInstitutionDetails(this.agencyId)
    // 获取员工信息
    this.getEmployeeDetails()
  },

  methods: {
    handleNodeClick(id) {
      // 机构id
      this.agencyId = id.id
      // 右上获取机构详情
      this.getInstitutionDetails(id.id)
      this.province = [] // 省份 需要每次切换把上次清空
      this.city = []
      this.county = []
      // 右下获取员工信息
      this.getEmployeeDetails()
    },

    // 左侧转运中心列表
    async getDepartmentList() {
      const { data } = await treeInstitutionApi()
      this.institutionList = JSON.parse(data.data)
      // console.log(this.institutionList)
    },

    // 右上获取机构详情
    async getInstitutionDetails(id) {
      const { data } = await getInstitutionDetailsApi(id)
      this.from = data.data
      // console.log(data.data)
      if (data.data.province) {
        // this.from.type === 1
        //   ? (this.from.type = '一级转运')
        //   : this.from.type === 2
        //   ? (this.from.type = '二级转运')
        //   : this.from.type ='网点'
        this.province.push(data.data.province) // 省份
        this.city.push(data.data.city) // 城市
        this.county.push(data.data.county) // 区县
        this.value = data.data.province.name // 省份默认值
        this.value2 = data.data.city.name // 城市默认值
        this.value3 = data.data.county.name // 区县默认值
        this.provinceId = data.data.province.id
        this.cityId = data.data.city.id
      }
      // 每次右上获取机构详情刷新都会调用 获取省市区接口来获取最新数据
      this.getAddress()
    },

    // 右下获取员工信息
    async getEmployeeDetails() {
      const obj = {
        agencyId: this.agencyId,
        page: this.page,
        pageSize: this.pageSize
      }
      const { data } = await getEmployeeDetailsApi(obj)
      // console.log(data)
      this.EmployeeDetails = data.data.items
      this.total = +data.data.counts
    },

    // 每页显示条目个数 改变时触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getEmployeeDetails()
    },
    // currentPage 改变时触发
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getEmployeeDetails()
    },

    // 点击编辑
    async editor() {
      console.log(this.from)
      if (this.flag === false) {
        // const obj = {}
        const data = await editorInstitutionApi(this.from)
        console.log(data)
        this.flag = true
        // this.getDepartmentList()
      } else {
        this.flag = false
      }
    },

    // 获取省市区
    async getAddress() {
      // 获取省数据
      const province = await getAddressApi()
      // console.log(province)
      this.province = province.data.data
      // 传省份Id获取城市数据
      const provinceId = await getAddressApi(this.provinceId)
      this.city = provinceId.data.data
      // 传城市ID获取区镇数据
      const cityId = await getAddressApi(this.cityId)
      this.county = cityId.data.data
    }
  }
}
</script>
<style scoped lang="scss">
/* 机构信息 */
.institution {
  padding: 15px;
  border-bottom: 1px solid #b4b4b4;
}
/*  */
.container {
  background-color: #f0f0f0;
  padding: 10px;
}
.TreeList {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  // height: 740px;
  height: 100%;
}
.right_info {
  padding: 0px 10px;
  .mech_info {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    // height: 370px;
    .mech_info_title {
      background-color: #e7e5e5;
      padding-left: 10px;
      // height: 50px;
      line-height: 50px;
    }
    .mech_info_contenter {
      background-color: #ffffff;
      // height: 300px;
      .row1 {
        margin-top: 10px;
      }
      .row_last {
        text-align: center;
      }
    }
  }
  .col-select {
    padding-left: 10px;
  }
  .peo_info {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    // height: 350px;
    .peo_info_title {
      background-color: #e7e5e5;
      padding-left: 10px;
      height: 50px;
      line-height: 50px;
    }
  }
}

// 分页器
.el-pagination {
  padding-top: 20px;
  text-align: center;
  background-color: white;
}
</style>
